<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
		<title>报表系统-登录</title>
		<link rel="stylesheet" href="<c:url value="/css/style.css"/>" type="text/css" />
		<style type="text/css">
			label{color: red;}
			#submit{background-color: #4877D1;padding: 8px 20px;font-size: 20px;color: #fff;border: 0;}
		</style>
		<script type="text/javascript" src="<c:url value="/js/jquery-1.12.1.min.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/js/jquery.validate.min.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/js/messages_zh_CN.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/js/jquery.form.js"/>"></script>
		<script type="text/javascript">
			
			$(function() {
				
				$("#userName").focus();
				
				// 验证
				$("#form").validate({
					
					rules: {
						userName: {
							required: true, 
							maxlength: 64,
						},
						password: {
							required: true, 
							maxlength: 128
						}
					},
					messages:{
						userName: {
							required: "*必填"
						},
						password:{
							required:"*必填"
						}
					}
				});
				
				// enter登录
				$(document).keyup(function(event){
					  if(event.keyCode ==13){
						  
					    login();
					  }
				});
			});
			
			// 登录
			function login(){
				
				if($("#form").valid()) {
					
					$.ajax({
						url: "<c:url value="/login/checkUser"/>",
						type: 'post',
						dataType: 'json',
						data: $("#form").serialize(),
						success: function (data) {
							
							if(data.result == "success") {
								
								window.location.href = "<c:url value="/login/loginSuccess"/>";
							}
							else if(data.result == "fail"){

								alert("用户名和密码不一致");
							}
							else{
								
								alert("系统错误");
							}
						}
					});
				}
			}
		</script>
	</head>
	<body style="text-align: center; background-image: URL('<c:url value="/images/login_bg.jpg"/>'); overflow: hidden;">
		<form id="form" name="form" method="post">
		<table width="493px" height="412px" style="margin:100px auto;background-image: URL('<c:url value="/images/login_inner.jpg"/>');"> 
			<tr> 
				<td style="height: 80px;"> </td> 
			</tr> 
			<tr> 
				<td style="height: 200px;text-align: left;">
						<div style="margin-left: 170px;">
							<input type="text" id="userName" name="userName" style="width: 200px; height: 30px;" maxlength="64">
						</div>
						<div style="margin-top: 40px;margin-left: 170px;">
							<input type="password" id="password" name="password" style="width: 200px; height: 30px;" maxlength="128">
						</div>
				</td> 
			</tr> 
			<tr> 
				<td> 
					<input type="button" id="submit" onclick="login()" value="<spring:message code='button.login'></spring:message>">
				</td> 
			</tr> 
		</table>
		</form>
	</body>
</html>